<template>
    <div class="location">
        <span>省份</span>
        <div class="locaChoice">
            <ul>
                <!-- 循环生成弹出框中上面部分的li -->
                <li v-for="(item,topindex) in location" :key="topindex">
                    <span>{{item}}<el-button @click="close(topindex)" type="" size="mini" plain class="el-icon-close"></el-button></span>
                </li>
            </ul>
            <!-- 点击下箭头，显示和隐藏省份选择框 -->
            <el-button type="text" class="el-icon-arrow-down"  title="点击按钮显示隐藏选项列表" @click="open"></el-button>
            <!-- 省份选择框 -->
            <div class="letterList" v-show="isOpen">
                <main>
                    <!-- elementUI tag标签切换 生成所有标签 -->
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane v-for="(tagitem,tagindex) in allLetter" :key="tagindex" :label="tagitem" :name="'h'+tagindex">
                            <el-button type="text">{{tagitem}}</el-button>
                            <!-- 判断是否是“全部”标签 如果不是 只显示对应的省份 -->
                            <ul v-if="activeName!='h0'">
                                <li v-for="(taglist,i) in letter" @click="add(taglist.name)" v-if="tagitem==taglist.letter" :key="i">
                                    <a href="#">{{taglist.name}}<em class=" el-icon-check"></em></a>
                                </li>
                            </ul>
                            <!-- 如果是“全部”标签 显示全部省份 -->
                            <ul v-else class="allopen">
                                <li v-for="(allitem,allindex) in allLetter.slice(1)" :key="allindex">
                                    <p>{{allitem}}</p>
                                    <ul>
                                        <li v-for="(list,i) in letter" v-if="allitem==list.letter" :key="i"><a href="#" @click="add(list.name)">{{list.name}}<em class=" el-icon-check"></em></a></li>
                                    </ul>
                                </li>
                            </ul>
                        </el-tab-pane>
                    </el-tabs>
                </main>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                isOpen: false,
                activeName: 'h0',
                allOpenShow: false,
                allLetter: [
                    '所有',
                    'A',
                    'B',
                    'F',
                    'G',
                    'H',
                    'J',
                    'L',
                    'N',
                    'Q',
                    'S',
                    'T',
                    'W',
                    'X',
                    'Y',
                    'Z'
                ],
                letter: [{
                        "ProID": 1,
                        "name": "北京",
                        "ProSort": 1,
                        "ProRemark": "直辖市",
                        "letter": "B"
                    }, {
                        "ProID": 2,
                        "name": "天津",
                        "ProSort": 2,
                        "ProRemark": "直辖市",
                        "letter": "T"
                    }, {
                        "ProID": 3,
                        "name": "河北",
                        "ProSort": 5,
                        "ProRemark": "省份",
                        "letter": "H"
                    }, {
                        "ProID": 4,
                        "name": "山西",
                        "ProSort": 6,
                        "ProRemark": "省份",
                        "letter": "S"
                    }, {
                        "ProID": 5,
                        "name": "内蒙古",
                        "ProSort": 32,
                        "ProRemark": "自治区",
                        "letter": "N"
                    }, {
                        "ProID": 6,
                        "name": "辽宁",
                        "ProSort": 8,
                        "ProRemark": "省份",
                        "letter": "L"
                    }, {
                        "ProID": 7,
                        "name": "吉林",
                        "ProSort": 9,
                        "ProRemark": "省份",
                        "letter": "J"
                    }, {
                        "ProID": 8,
                        "name": "黑龙江",
                        "ProSort": 10,
                        "ProRemark": "省份",
                        "letter": "H"
                    }, {
                        "ProID": 9,
                        "name": "上海",
                        "ProSort": 3,
                        "ProRemark": "直辖市",
                        "letter": "S"
                    }, {
                        "ProID": 10,
                        "name": "江苏",
                        "ProSort": 11,
                        "ProRemark": "省份",
                        "letter": "J"
                    }, {
                        "ProID": 11,
                        "name": "浙江",
                        "ProSort": 12,
                        "ProRemark": "省份",
                        "letter": "Z"
                    }, {
                        "ProID": 12,
                        "name": "安徽",
                        "ProSort": 13,
                        "ProRemark": "省份",
                        "letter": "A"
                    }, {
                        "ProID": 13,
                        "name": "福建",
                        "ProSort": 14,
                        "ProRemark": "省份",
                        "letter": "F"
                    }, {
                        "ProID": 14,
                        "name": "江西",
                        "ProSort": 15,
                        "ProRemark": "省份",
                        "letter": "S"
                    }, {
                        "ProID": 15,
                        "name": "山东",
                        "ProSort": 16,
                        "ProRemark": "省份",
                        "letter": "S"
                    }, {
                        "ProID": 16,
                        "name": "河南",
                        "ProSort": 17,
                        "ProRemark": "省份",
                        "letter": "H"
                    }, {
                        "ProID": 17,
                        "name": "湖北",
                        "ProSort": 18,
                        "ProRemark": "省份",
                        "letter": "H"
                    }, {
                        "ProID": 18,
                        "name": "湖南",
                        "ProSort": 19,
                        "ProRemark": "省份",
                        "letter": "H"
                    }, {
                        "ProID": 19,
                        "name": "广东",
                        "ProSort": 20,
                        "ProRemark": "省份",
                        "letter": "G"
                    }, {
                        "ProID": 20,
                        "name": "海南",
                        "ProSort": 24,
                        "ProRemark": "省份",
                        "letter": "H"
                    }, {
                        "ProID": 21,
                        "name": "广西",
                        "ProSort": 28,
                        "ProRemark": "自治区",
                        "letter": "G"
                    }, {
                        "ProID": 22,
                        "name": "甘肃",
                        "ProSort": 21,
                        "ProRemark": "省份",
                        "letter": "G"
                    }, {
                        "ProID": 23,
                        "name": "陕西",
                        "ProSort": 27,
                        "ProRemark": "省份",
                        "letter": "S"
                    }, {
                        "ProID": 24,
                        "name": "新疆",
                        "ProSort": 31,
                        "ProRemark": "自治区",
                        "letter": "X"
                    }, {
                        "ProID": 25,
                        "name": "青海",
                        "ProSort": 26,
                        "ProRemark": "省份",
                        "letter": "Q"
                    }, {
                        "ProID": 26,
                        "name": "宁夏",
                        "ProSort": 30,
                        "ProRemark": "自治区",
                        "letter": "N"
                    }, {
                        "ProID": 27,
                        "name": "重庆",
                        "ProSort": 4,
                        "ProRemark": "直辖市",
                        "letter": "C"
                    }, {
                        "ProID": 28,
                        "name": "四川",
                        "ProSort": 22,
                        "ProRemark": "省份",
                        "letter": "S"
                    }, {
                        "ProID": 29,
                        "name": "贵州",
                        "ProSort": 23,
                        "ProRemark": "省份",
                        "letter": "G"
                    }, {
                        "ProID": 30,
                        "name": "云南",
                        "ProSort": 25,
                        "ProRemark": "省份",
                        "letter": "Y"
                    }, {
                        "ProID": 31,
                        "name": "西藏",
                        "ProSort": 29,
                        "ProRemark": "自治区",
                        "letter": "X"
                    }, {
                        "ProID": 32,
                        "name": "台湾",
                        "ProSort": 7,
                        "ProRemark": "省份",
                        "letter": "T"
                    }, {
                        "ProID": 33,
                        "name": "澳门",
                        "ProSort": 33,
                        "ProRemark": "特别行政区",
                        "letter": "A"
                    }, {
                        "ProID": 34,
                        "name": "香港",
                        "ProSort": 34,
                        "ProRemark": "特别行政区",
                        "letter": "X"
                    },
                    {
                        "ProID": 35,
                        "name": "外国",
                        "ProSort": 36,
                        "ProRemark": "直辖市",
                        "letter": "W"
                    }
                ]
            }
        },
        props:['location'],
        methods: {
            close(index) {
                this.location.splice(index, 1)
            },
            handleClick(tab, event) {},
           open(){
            this.isOpen=!this.isOpen

           },
            add(val) {
                var value = this.location.indexOf(val)
                if (value == -1) {
                    this.location.unshift(val)
                } else {
                    console.log('已存在数据添加失败')
                }
            }
        }
    }
</script>
<style lang="scss">
    .location {
        display: flex;
        justify-content: space-between;
        align-items: center;
     
ul {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    li {
        margin-right: 10px;
        font-size: 12px;
    }
   
    .letterList {
        position: absolute;
        bottom: -200px;
        width: 100%;
        height: 200px;
        overflow: scroll;
        main {
            li>a {
                display: block;
                width: 100%;
                height: 100%;
                em {
                    float: right;
                    line-height: 200%;
                }
            }
            li>a:hover {
                background-color: #009688;
                color: white;
            }
            background-color: #fff;
            border-bottom: 1px solid #eee;
            ul {
                display: flex;
                flex-direction: column;
            }
            .el-tabs__item {
                padding: 0 5px !important;
            }
            .allopen {
                p {
                    color: #009688;
                }
            }
        }
    }
    }
    .location>span {
        display: inline-block;
        width: 80px;
        vertical-align: middle;
    }
    .locaChoice {
        position: relative;
        border: 1px solid #009688;
        padding: 10px;
        border-radius: 5px;
        width: 90%;
        display: flex;
        justify-content: space-between; // overflow: hidden;
    }
    .locaChoice>ul>li {
        border: 1px solid #009688;
        padding: 1px;
        border-radius: 5px;
        color: #009688;
        margin-bottom: 5px;
         .el-button--mini,
    .el-button--mini.is-round {
        padding: 1px 1px;
        margin-left: 5px;
        color: #009688;
        border-color: #009688;
        border-radius: 50%;
    }
    }
    
</style>
